<template>
  <div class="login-background">
    <el-card
      :body-style="{ padding: '0px' }"
      shadow="always"
      class="login-layout"
    >
      <el-row>
        <el-container>
          <el-col class="hidden-xs-only" :sm="8" :md="12" :lg="12" :xl="12">
            <el-aside>校园疫情管理系统</el-aside>
          </el-col>
          <el-col :xs="24" :sm="16" :md="12" :lg="12" :xl="12">
            <el-main>
              <div class="login_title mb-10">登录</div>
              <el-card shadow="always" class="login-form">
                <el-form
                  ref="userFormRef"
                  :model="user"
                  labelPosition="top"
                  :rules="rules"
                  status-icon
                  label-width=".625rem"
                  class="demo-ruleForm"
                >
                  <el-form-item label="用户名" prop="username">
                    <el-input
                      v-model.trim="user.username"
                      type="text"
                      clearable
                      placeholder="请输入用户名"
                      style="width: 50%"
                      @keyup.enter="login()"
                    />
                  </el-form-item>

                  <el-form-item label="密码" prop="password">
                    <el-input
                      v-model.trim="user.password"
                      type="password"
                      show-password
                      placeholder="请输入密码"
                      clearable
                      @keyup.enter="login()"
                    />
                  </el-form-item>

                  <el-form-item label="验证码" prop="captcha" class="yan">
                    <el-input
                      v-model.trim="user.captcha"
                      type="text"
                      placeholder="请输入验证码"
                      clearable
                      @keyup.enter="login()"
                    />
                    <div style="height: 50px" class="ml-12">
                      <el-image
                        style="width: 100%; height: 100%"
                        :fit="'scale-down'"
                        :src="'http://' + serverIp + ':9090/user/getCode'"
                        onclick="this.src=this.src+'?'"
                      />
                    </div>
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      class="submit_button"
                      @click="login()"
                      >登录</el-button
                    >
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      class="submit_button"
                      @click="$router.push('/register')"
                      >注册</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-card>
            </el-main>
          </el-col>
        </el-container>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { serverIp } from '../../public/config'
import { setRoutes } from '@/router'
export default {
  data() {
    //ref
    return {
      serverIp: serverIp,
      //对象
      user: {
        username: '',
        password: '',
        captcha: ''
      },

      rules: {
        username: [
          {
            //必填项
            required: true,
            message: '请输入用户名',
            // 失去焦点
            trigger: 'blur'
          },
          {
            //最小最大值
            min: 2,
            max: 10,
            message: '长度至少3~10个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {
            //必填项
            required: true,
            message: '请输入密码',
            // 失去焦点
            trigger: 'blur'
          },
          {
            //最小最大值
            min: 5,
            max: 12,
            message: '长度至少6~12个字符',
            trigger: 'blur'
          }
        ],
        captcha: {
          //必填项
          required: true,
          message: '请输入验证码',
          // 失去焦点
          trigger: 'blur'
        }
      }
    }
  },

  methods: {
    login() {
      this.$refs['userFormRef'].validate((valid) => {
        if (valid) {
          console.log('登录验证中')
          // 表单校验合法
          this.$http.post('/user/login', this.user).then((res) => {
            console.log(res)
            console.log(JSON.stringify(res.data))
            if (res.status === '200') {
              // 本地存储:存储字符串 JSON.stringify 对象-》字符串
              localStorage.setItem('user', JSON.stringify(res.data)) //存储信息到浏览器当中
              localStorage.setItem(
                'menus',
                JSON.stringify(res.data.menus) //存储所选菜单列表到浏览器当中
              )
              // localStorage.setItem(
              //   'role',
              //   JSON.stringify(res.data.role) //存储所选菜单列表到浏览器当中
              // )
              //动态设置当前用户的路由
              setRoutes()
              this.$router.push('/')
              this.$message.success('登陆成功')
              console.log(res.data.role);
              if (res.data.role === 'ROLE_STUDENGT') {
                this.$router.push('/front/userhourse')
              } else {
                this.$router.push('/')
              }
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login-background {
  height: 100vh;
  // background: url(@/assets/img/login-bg2.jpg) no-repeat;
  background-size: cover;
  background-color: rgb(64, 76, 105);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  .el-card {
    border: transparent;
    border-radius: 20px;
  }
  .login-layout {
    background-color: #fff;
    width: 95%;
    .el-aside,
    .el-main {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-aside {
      background-color: rgb(53, 62, 84);
      // background: url(@/assets/img/login-bg2.jpg) no-repeat;
      // background-position: center center;
      // background-size: cover;
      font-size: 0.625rem;
      color: #fff;
    }

    .el-main {
      display: flex;
      flex-direction: column;
      .login_title {
        font-size: 30px;
        font-weight: 800;
      }
      .login-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        width: 70%;

        .el-form {
          .submit_button {
            width: 100%;
            height: 40px;
          }
        }
        //   输入框

        .el-form-item {
          margin-bottom: 20px;
        }
        .yan {
          /deep/ .el-form-item__content {
            width: 100%;
            height: 50px;
            line-height: 50px;
            .el-input {
              flex: 5;
            }
            div {
              flex: 2;
            }
          }
        }
        /deep/ .el-form-item__content {
          width: 100%;
          height: 40px;
          line-height: 40px;
        }
        /deep/ .el-input {
          height: 100%;
        }
      }
    }
  }
}
</style>